<template>
	<view class="mph100 bf">
		<swiper class="swiper" :indicator-dots="true" indicator-color="#8da4ce" indicator-active-color="#1c499e"
			:autoplay="false" :interval="5000" :duration="500" :current="current" @change="swiperChange">
			<swiper-item v-for="(item, index) of banners" :key="index">
				<view class="pt100 tac">{{ tips[index] }}</view>
				<view class="picItem flex_aj">
					<image :src="item | formatImg" mode="widthFix" />
				</view>
			</swiper-item>
		</swiper>
		<view class="mt60 flex_aj">
			<view class="nextBtn" @click="handleNext">{{use?'开始使用':'下一步'}}</view>
		</view>
		<view class="mt60 flex_aj" v-if="use">
			<image src="/static/ic_gx.png" style="width: 36upx;" mode="widthFix" />
			<text class="mlr10 c9">勾选表示同意</text>
			<text class="primary" @click="routerLink({
				path:'/pages/article/base',
				query:{
					systemType:5
				}
			})">《用户使用协议》</text>
		</view>
	</view>
</template>

<script>
	import {
		getUrlParam
	} from '@/utils/tools.js';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		name: 'index',
		data() {
			return {
				tips: ['打开设备开关', '扫描屏幕上的二维码', '选择K歌套餐', '完成支付并使用'],
				banners: [],
				current: 0,
				use: false,
				equipmentNumber: ''
			};
		},
		onLoad(e) {
			if (e.q) {
				if (e.q.indexOf("equipmentNumber") > 0) { //外部扫码

					let url = decodeURIComponent(e.q)
					this.equipmentNumber = getUrlParam("equipmentNumber", url);
				} else {
					this.confirm({
						content: "二维码无效,请重新扫码",
						showCancel: false,
					}).then((res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/user/index/index'
							});
						}
					})
				}
			} else {
				this.equipmentNumber = e.equipmentNumber;
			}
		},
		onShow() {
			this.getPageSet();
			this.handleGetUserInfo().then(res => {
				console.log(res);
			});
		},
		methods: {
			...mapActions(['handleGetUserInfo']),
			async getPageSet() {
				let res = await this.$http({
					url: '/api/pageSet/getPageSet'
				});
				console.log(res);
				this.banners = [];
				let entity = res.data.pageSetEntity;
				if (entity.guideBgOne) {
					this.banners.push(entity.guideBgOne);
				}
				if (entity.guideBgTwo) {
					this.banners.push(entity.guideBgTwo);
				}
				if (entity.guideBgThree) {
					this.banners.push(entity.guideBgThree);
				}
				if (entity.guideBgFour) {
					this.banners.push(entity.guideBgFour);
				}
			},
			swiperChange(e) {
				this.current = e.detail.current;
				if (this.current == this.banners.length - 1) {
					this.use = true;
				}
			},
			handleNext() {
				if (this.use) {
					this.routerLink({
						openType: 'redirectTo',
						path: '/pages/user/package/index',
						query: {
							equipmentNumber: this.equipmentNumber
						}
					})
				} else {
					this.current = ++this.current % this.banners.length;
					if (this.current == this.banners.length - 1) {
						this.use = true;
					}
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.swiper {
		height: 750upx;

		.picItem {
			width: 100%;
			height: 100%;

			image {
				width: 340upx;
				height: 100%;
			}
		}
	}

	.nextBtn {
		width: 330upx;
		border: 1px solid $primary;
		border-radius: 45upx;
		color: $primary;
		line-height: 90upx;
		font-size: 32upx;
		text-align: center;
	}
</style>
